<!doctype html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <meta name="keyword" content="demo,plugin,demo">
    <meta name="description" content="demo 插件">
    <style>
        body {
            width: 100vw;
            margin: 0;
            min-height: 100vh;
            background-image: -webkit-linear-gradient(bottom,#00FFDB 0%,#14507F 100%);
            user-select: none;
        }
        p {
            width: 50%;
            padding: 20px 30px;
            margin: 30px auto;
            border-radius: 5px;
            background-color: white;
            font-weight: bold;
            box-shadow: 2px 5px 0 rgba(0,0,0,.2);
            transition-duration: .5s;
            cursor: pointer;
        }
        p:hover {
            box-shadow: 0 1px 0 rgba(0,0,0,.3);
        }
        p:active {
            transition-duration: .1s;
            background-color: rgba(255,255,255,.6);
            box-shadow: 0 0 10px rgba(255,255,255,.9);
        }
        h1 {
            text-align: center;
            font-size: 100px;
            color: transparent;
            -webkit-text-stroke: 1px white;
            overflow: hidden;
            -webkit-background-clip: text;
            animation: sd 1s;
        }
        h1:before {
            content: attr(attr);
            overflow: hidden;
            position: absolute;
            color: white;
            height: 74px;
            transition-duration: .5s;
            animation: dh 5s;
        }
        h2 {
            color: rgba(255,255,255,.3);
            -webkit-text-stroke: 1px rgba(255,255,255,.3);
            text-align: center;
        }
        .h {
            color: white;
            background-color: #0CA1BB;
            box-shadow: 2px 5px 0 rgba(0,0,0,.3);
        }
        .h:hover {
            background-color: #0992AA;
        }
        .h:active {
            background-color: rgba(12, 161, 187,.6);
        }
        @keyframes dh {
            0% {
                height: 0px;
            }
            100% {
                height: 74px;
            }
        }
        @keyframes sd {
            0% {
                transform: translateY(-100%);
            }
            25% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
            100% {
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>
<h1 attr="subMusic Plugin">subMusic Plugin</h1>
<h2>by SLM [qq:478889187]</h2>
<h2>一个简陋的js音效插件</h2>
    <p id="p" data-submusic='shimmer-vibes.mp3'>
        点击我立马播放
    </p>
    <p data-play='1000' data-submusic='shimmer-vibes.mp3'>
        点击我1秒后播放
    </p>
    <p data-stop='3000' data-submusic='//m10.music.126.net/20180813133537/d8b5c1f92cf21fc9c6699157d2a9d61f/ymusic/9ee3/8129/4eee/ab0e3883fba6f7ec0ea9491ef917d826.mp3'>
        点击我立马播放,3秒后暂停
    </p>
    <p data-play='1000' data-playstop="3000" data-submusic='//m10.music.126.net/20180813133537/d8b5c1f92cf21fc9c6699157d2a9d61f/ymusic/9ee3/8129/4eee/ab0e3883fba6f7ec0ea9491ef917d826.mp3'>
        点击我1秒后播放,播放3秒后暂停
    </p>
    <p data-stop='1000' data-playstop="3000" data-submusic='//m10.music.126.net/20180813133537/d8b5c1f92cf21fc9c6699157d2a9d61f/ymusic/9ee3/8129/4eee/ab0e3883fba6f7ec0ea9491ef917d826.mp3'>
        点击我1秒后播放,播放3秒后暂停,实际播放2秒
    </p>
    <p data-volume='0.3' data-submusic='shimmer-vibes.mp3'>
        点击我立马播放,30%的音量
    </p>
    <p data-on='10000' data-submusic='//m10.music.126.net/20180813133537/d8b5c1f92cf21fc9c6699157d2a9d61f/ymusic/9ee3/8129/4eee/ab0e3883fba6f7ec0ea9491ef917d826.mp3'>
        点击我播放,声音逐渐放大
    </p>
    <p data-out='10000' data-submusic='//m10.music.126.net/20180813133537/d8b5c1f92cf21fc9c6699157d2a9d61f/ymusic/9ee3/8129/4eee/ab0e3883fba6f7ec0ea9491ef917d826.mp3'>
        点击我播放,快结束时声音逐渐缩小
    </p>
    <p class="h" data-mouseover='true' data-submusic='shimmer-vibes.mp3'>
        鼠标悬浮播放
    </p>
    <p class="h" data-mouseover='true' data-play='1000' data-submusic='shimmer-vibes.mp3'>
        鼠标悬浮1秒后播放
    </p>
    <p class="h" data-mouseover='true' data-count='1' data-submusic='shimmer-vibes.mp3'>
        鼠标悬浮后播放[最多播放一次音效]
    </p>
    <p class="h" data-mouseover='true' data-count='4' data-submusic='shimmer-vibes.mp3'>
        鼠标悬浮后播放[最多播放四次音效]
    </p>

<p data-mouseover='true' data-count='4' data-submusic='shimmer-vibes.mp3'>
    <a href="subMusic.js">查看代码</a>
</p>
</body>
<script src="subMusic.js"></script>
<script>
    /*sub =subMusic({
            el: '#h',
            src: 'shimmer-vibes.mp3'
        },e => {
        // console.log(e)
    });
    sub =subMusic({
        el: '#d',
        src: 'shimmer-vibes.mp3'
    },e => {
        // console.log(e)
    });
    // sub.closePassive()*/
</script>